{% extends 'tend/account/common/base.html' %}
{% import "tend/macros/_patination.html" as page_macros %}
{% block css %}
{{super()}}
<link href="{{ url_for('main.static', filename='css/account.css')}}" rel="stylesheet">
<style>
    .list-group-item {
        background-color: inherit;
    }
</style>
{% endblock %}
{% block contents %}

<div class="container">
    <div class="row justify-content-md-center mt-2">
        <form class="col-md-8" method="get">
            <div class="form-group row">
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="code" name="code" placeholder="应用编码"
                        value="{{request.values.get('code','')}}" required>
                </div>
                <button class="col-sm-2 btn btn-primary">查找</button>
            </div>
        </form>

        <form class="col-md-8 mt-5">
            <div class="form-group row">
                <label for="name" class="col-sm-2 col-form-label">应用名称:</label>
                <div class="col-sm-8">
                    <input type="text" readonly class="form-control" id="name" value="{{project.name or '无'}}">
                </div>
            </div>
            <div class="form-group row">
                <label for="name" class="col-sm-2 col-form-label">应用编码:</label>
                <div class="col-sm-8">
                    <input type="text" readonly class="form-control" id="name" value="{{project.code or '无'}}">
                </div>
            </div>

            <div class="row">
                <div class="card-deck mb-3 text-center">
                    {% for item in project.items.all() %}
                    <div class="card mb-4 box-shadow">
                        <div class="card-header">
                            <h4 class="my-0 font-weight-normal">{{item.name}}</h4>
                        </div>
                        <div class="card-body">
                            <h1 class="card-title pricing-card-title">{{item.price}}元 <small class="text-muted">/
                                    {{item.days}}天</small></h1>
                            <ul class="list-unstyled mt-3 mb-4">
                                <li>卡密只可用于激活当前软件</li>
                                <li>卡密需联网使用</li>
                                <li>限制主机绑定数量 {{item.limit_count}} 台</li>
                                <li>支持自解绑</li>
                                <li>最终解释权归作者所有</li>
                            </ul>
                            <button type="button" class="btn btn-lg btn-block btn-primary btn-pay"
                                data-itemid="{{item.id}}"
                                data-desp="{{project.name}}-{{item.price}}元/{{item.days}}天">支付</button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- <button type="submit" class="btn btn-primary">支付</button> -->
        </form>
    </div>

</div>

<!--支付-->
<div id="modal-pay" class="modal fade" tabindex="-1" aria-labelledby="exampleModalCenterTitle" style="display: none;"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">请使用支付宝支付</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <h2 id="pay-desp" class="row justify-content-md-center m-1"></h2>
                <div id="pay-div" class="row justify-content-md-center m-5">
                    <div class="card">
                        <div id="qrcode" class="m-1"></div>
                        <div class="card-body">
                            <p style="font-size: larger;font-weight: 700;">
                                <svg t="1700484615558" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4032" width="32" height="32">
                                    <path
                                        d="M860.16 0C950.272 0 1024 73.889684 1024 164.163368v531.509895s-32.768-4.122947-180.224-53.355789c-40.96-14.362947-96.256-34.896842-157.696-57.478737 36.864-63.595789 65.536-137.485474 86.016-215.444211h-202.752v-71.841684h247.808V256.512h-247.808V135.437474h-100.352c-18.432 0-18.432 18.458947-18.432 18.458947v104.663579H200.704v41.040842h249.856v69.793684H243.712v41.013895H645.12c-14.336 51.307789-34.816 98.519579-57.344 141.608421-129.024-43.115789-268.288-77.985684-356.352-55.403789-55.296 14.362947-92.16 38.992842-112.64 63.595789-96.256 116.978526-26.624 295.504842 176.128 295.504842 120.832 0 237.568-67.718737 327.68-178.526316C757.76 742.858105 1024 853.692632 1024 853.692632v6.144C1024 950.110316 950.272 1024 860.16 1024H163.84C73.728 1024 0 950.137263 0 859.836632V164.163368C0 73.889684 73.728 0 163.84 0h696.32zM268.126316 553.121684c93.049263-10.374737 180.062316 26.974316 283.270737 78.874948-74.886737 95.501474-165.941895 155.701895-256.970106 155.701894-157.830737 0-204.368842-126.652632-125.466947-197.200842 26.300632-22.851368 72.838737-35.301053 99.166316-37.376z"
                                        fill="#00A0EA" p-id="4033"></path>
                                </svg>
                                请使用支付宝扫一扫
                            </p>
                            <p id="countdown-container">正在加载二维码</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div> -->
        </div>
    </div>
</div>

{% endblock %}
{% block js %}
{{ super() }}
<script src="{{url_for('admin.static',filename='ajax/libs/toastr/toastr.min.js')}}"></script>
<script src="{{url_for('admin.static',filename='ajax/libs/layer/layer.min.js')}}"></script>
<script src="{{url_for('main.static',filename='js/qrcode.js')}}"></script>
<script>
    var qrcode = new QRCode('qrcode', {
        text: '数据加载失败',
        width: 256,
        height: 256,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });

    var countdownInterval = null;
    var order_no = null;

    $(function () {

        $(".btn-pay").click(function () {
            let item_id = $(this).data("itemid");
            let item_desp = $(this).data("desp");
            $('#pay-desp').html(item_desp)
            console.log(item_id, item_desp)
            let data = {
                'item_id': item_id,
            }
            $('#qrcode').hide()
            $('#countdown-container').text('正在加载支付二维码')
            $.ajax({
                url: "{{url_for('main.account.auth_card_pay')}}",
                type: "post",
                data: data,
                dataType: 'json',
                success: function (res) {
                    // console.log(res)
                    if (res.code == 0) {
                        // toastr.success(res.msg);
                        $('#qrcode').show()
                        order_no = res.data.out_trade_no
                        qrcode.clear()
                        qrcode.makeCode(res.data.qrcode_url)
                        clearInterval(countdownInterval)
                        countdown(60 * 5); // 60秒倒计时
                    } else {
                        toastr.error(res.msg);
                    }
                },
                fail: function (res) {
                    toastr.error('网络错误');
                }
            })

            $('#modal-pay').modal({
                keyboard: false,
                show: true,
            })
            return false;
        });

        $('#modal-pay').on('hidden.bs.modal', function (event) {
            clearInterval(countdownInterval); // 清除计时器
        })
    });

    function countdown(seconds) {
        var remainingSeconds = seconds;
        countdownInterval = setInterval(function () {
            if (remainingSeconds <= 0) {
                clearInterval(countdownInterval); // 清除计时器
                // $('#send-yzm-btn').prop('disabled', false)
                // $('#countdown-container').text('发送邮件验证码')
                // TODO: 倒计时结束之后的逻辑
            } else {
                // 更新剩余时间并显示出来
                remainingSeconds--;
                var countdownContainer = document.getElementById("countdown-container");
                countdownContainer.textContent = remainingSeconds + "秒后过期";
                is_pay()
            }
        }, 1000);

    }

    //是否支付
    function is_pay() {
        var formData = new FormData()
        formData.append('order_no', order_no)
        $.ajax({
            url: '/is_pay/',
            type: "post",
            data: { 'order_no': order_no },
            dataType: 'json',
            success: function (res) {
                // console.log(res)
                if (res.code == 0) {
                    toastr.success(res.msg);
                    clearInterval(countdownInterval)
                    toastr.success('支付成功')
                    //刷新当前界面
                    layer.confirm('支付成功', { icon: 3, title: '提示' }, function (index) {
                        //用户点击了确定按钮，执行相关操作
                        layer.close(index); //关闭当前弹窗
                        window.location.href = "{{url_for('main.account.auth_cards')}}"
                    });
                    
                } else {

                }
            },
            fail: function (res) {
                toastr.error('网络错误');
            }
        });
    }
</script>
{% endblock %}